<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  不加.lazy的时候我们的数据更改是实时更新的，而加了.lazy以后，只有当时间失去焦点以后或者按了enter以后才会更新-->
<!--  <input type="text" v-model.lazy="message">{{message}}-->
<!--  默认情况下，不论我们在输入框输入字母还是数字，HTML 输入元素的值总会返回字符串；如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：-->
<!--  <input type="number" v-model.number="number">{{number}}&#45;&#45;{{typeof (number)}}-->
<!--  如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：-->
  <input type="text" v-model.trim="str">{{str}}
</div>

<script src="../js/vue.js"></script>
<script>
  //let(变量)和const(常量)
  const app = new Vue({
    el: '#app',
    data: {
      message: '中国牛蛙！',
      number: 0,
      str: 'aaaa'
    }
  })
</script>
</body>
</html>